import React, {Component} from 'react'
import {connect} from 'react-redux'
import { Link } from "react-router-dom"

import { Button, Toast } from 'antd-mobile';

import {userWithdraw} from "../redux/actions/userAction"
import {showActionSheet} from "../utils/three_ant"

import Header from "./header"
export default class WithDrawcompont extends Component {

  constructor (props){
   super(props)
   const {user} = this.props
   this.state= {
    userbank: "",
    bankId:0,
    withdrawPW:""
   }
}

// componentWillMount(){

// }
  componentDidUpdate(){

  }

  withdraw = ()=>{
    const {balance,} = this.refs;
    const {bankId,withdrawPW} = this.state
    const {dispatch,user,history} = this.props
    if(!balance.value){
      return Toast.fail("请输入提现额度")
    }
    if(balance.value%100 !==0){
      return Toast.fail("提现金额必须为100的倍数")
    }
    if(!withdrawPW){
      return Toast.fail("密码不能为空")
    }
    var userbankId= bankId || user.get("userbankLists")[bankId].id
    Toast.loading("提交中",0)
    dispatch(userWithdraw(balance.value,withdrawPW,userbankId,(ok,data)=>{
        ok? (Toast.success(data),history.push("/my")) : Toast.fail(data)
    }))

  }
   render() {
     const {user} = this.props
     const {userbank} = this.state
     let userbanklist = user.get("userbankLists");
      
     if(userbanklist.length ==0 ){
       return <div className="withdraw">
              <Header title="提现" {...this.props}></Header> 
              <div className="withdraw-contanier">
                <div className="waring">您还没有绑定银行卡</div>
                <div className="notice">
                    银行卡信息修改请联系客服处理(最多绑定3张银行卡)
                </div>
                <Link to="/my/add/bank">点击添加银行卡</Link>
                </div>
                </div>
     }
    var userbindbanklist = []
    userbanklist.forEach(element => {
      userbindbanklist.push(
        element.bankCnName +"("+ element.bankCard.slice(15) +")"
      )
    });
    // userbanklist[0].bankCnName +
    let defaultbank = userbanklist[0] &&  userbanklist[0].bankCnName +"("+ userbanklist[0].bankCard.slice(15) +")";

    //  console.log(user.get("userbankLists")[0].bankType);
   return <div className="withdraw">
          <Header title="提现" {...this.props}></Header> 
          <div className="withdraw-contanier">
        <div className="withdrawbody">
          <div className="form-group form-group-depth-1 form-group-bank">
          <label className="control-label">提现金额:</label>
            <input type="number" placeholder="请填写提现金额"  ref="balance"
            onChange={(e)=>{if(e.target.value > user.get("info").userMoney){
              Toast.fail("超过你的余额,请重新填写",1);
              e.target.value = ""
            }}
          }
            />
          </div>

          <div className="form-group form-group-depth-1 form-group-bank">
          <label className="control-label">到账银行卡:</label>
          <div className="selectbox"><div className="sbwrap" 
          onClick={()=>{
            showActionSheet(
              userbindbanklist,
            "选择您汇入的银行卡",
            (value,index)=>{this.setState({ userbank: value,bankId:userbanklist[index].id})}
            )
          }}><span className="cont ">
          { userbank || defaultbank}</span></div></div></div>

          <div className="form-group form-group-depth-1 form-group-bank">
          <label className="control-label">提款密码:</label>
            <input type="password" placeholder="提款密码" value={this.state.withdrawPW} onChange={(e)=>{e.target.value.length<=4?this.setState({withdrawPW:e.target.value}):""}}/>
          </div>
          <div className="howmuch">
              <p>当前余额为{user.get("info").userMoney}元，可提现额度为{parseInt(user.get("info").userMoney / 100)+"00"}元</p>
          </div>     
        </div>
          <div className="basepage">
          <div className="tip">
            <p>提现成功后，请留意银行短信提现及银行卡余额变动，如有任何疑问请联系客服QQ12345698</p>
          </div>
              <Button type="primary" onClick={() =>this.withdraw()} >确认提现</Button>
              </div>
        </div>
      </div>
   }
}
